<template>
  <div id="container">
    <div id="cesiumContainer">
      <div style="position: absolute;z-index:10;display: flex;flex-direction: column">
      <dv-border-box-8 style="height: 30px;padding: 10px;width: 300px;margin-top: 10px;margin-left: 10px">
        <div style="color: white;display: flex;align-items: center;justify-content: center;font-size: 18px;font-weight: bold;cursor: pointer">模型结构</div>
      </dv-border-box-8>
      <dv-border-box-13 backgroundColor="#19233Ddf" style="width: 300px;padding: 20px;">
        <div class="bg-color-black" >
          <div class="d-flex jc-center body-box">
            <div style="max-height: 730px;overflow-y: auto">
              <dv-border-box-12 style="height: 50px;overflow-y: hidden">
                <div style="display: flex;flex-direction: row;padding-top: 10px;cursor: pointer" >
                  <div style="color: white;width: 280px;margin-left: 40px;display: flex;flex-direction: row;">
                    <input style="layer" type="text" v-model="mileage" placeholder="请输入里程桩号...">
                    <div style="margin-left: 20px;" @click="searchModle" type="submit">查看</div>
                    
                  </div>
                </div>
              </dv-border-box-12>
              <!-- <div style="color: white;width: 200px;margin-left: 40px;border: 3px solid;border-color: #33CCCC;" >
                <input type="checkbox" class="layer" id="json_02" @click="checkboxOnclick('右线')" checked="checked">
                <label for="json_02">右线</label>
              </div> -->
              
            </div>
          </div>
        </div>
      </dv-border-box-13>
      </div>
    </div>
  </div>
  
</template>

<script>
let viewer = null;
import axios from "axios";
import * as Cesium from "cesium/Cesium";
import drawTunnel from "./d3/drawTunnel";
import Util_Projection from "./d3/Util_Projection";
import sub_dataview from "./sub_dataview";
import vkbeautify from "vkbeautify";
import x2js from "x2js";
import profile_model from "./profile_model"
let x2jsObj = new x2js();
let baseUrl = "";
let prjCode = "laoying";
export default {
  data() {
    return {
      defs:[],
      MILLdata: null,
      mileage:null,
      LNTY:null,
      entity:[],
      struction:["内轮廓","建筑限界","初衬","二衬"],
      pathArr:[],
      matchedInfo:{},
      selectFile:null,
      id : 0,
    };
  },
  /*
    页面初始化开始执行
  */
  created() {},
  /*
    界面初始化完毕执行
   */
  mounted() {
    this.initData();
    this.initScene();
    this.fileClick();
  },
  methods: {
    searchModle(){
      let code = this.defs[1].code;
      let MILL = [];
      axios.get(`/api/prj/data?code=${prjCode}&objCode=${code}`).then(res => {
      this.MILLdata = res.data;
      });
      console.log(this.mileage)
      // console.log(this.MILLdata)
      var mileage=parseFloat(this.mileage.replace(/[^(0-9&.)]/ig, ""))
      for (var i = 0; i < this.MILLdata.length;i++ ) {         
        var MILL_STAR = parseFloat(this.MILLdata[i].MILL_STAR.replace(/[^(0-9&.)]/ig, ""))
        var MILL_END = parseFloat(this.MILLdata[i].MILL_END.replace(/[^(0-9&.)]/ig, ""))
        if(MILL_STAR<MILL_END){
          if((MILL_STAR<mileage) || (MILL_END>mileage)){
          console.log(this.MILLdata[i].MILL_LNTY)
          this.LNTY=this.MILLdata[i].MILL_LNTY
          break;
          }
        }else{
          if((MILL_STAR>mileage) || (MILL_END<mileage)){
          console.log(this.MILLdata[i].MILL_LNTY)
          this.LNTY=this.MILLdata[i].MILL_LNTY
          break;
          }  
        }
      }
      this.matchedInfo.LNTY=this.LNTY
      axios.get(`/api/prj/data?code=${prjCode}&objCode=SHOC`).then(res => {
        var SHOC = res.data;
        for (var i = 0; i < SHOC.length;i++ ) {
          if(SHOC[i].MILL_LNTY==this.LNTY){
            // console.log(SHOC[i])
            this.matchedInfo.SHOC=SHOC[i]
            break
          }
        }
      });
      axios.get(`/api/prj/data?code=${prjCode}&objCode=SECL`).then(res => {
        var SECL = res.data;
        for (var i = 0; i < SECL.length;i++ ) {
          if(SECL[i].MILL_LNTY==this.LNTY){
            this.matchedInfo.SECL=SECL[i]
            // console.log(SECL[i])
            break
          }
        }
      });
      axios.get(`/api/prj/data?code=${prjCode}&objCode=BOLT`).then(res => {
        var BOLT = res.data;
        for (var i = 0; i < BOLT.length;i++ ) {
          if(BOLT[i].MILL_LNTY==this.LNTY){
            this.matchedInfo.BOLT=BOLT[i]
            // console.log(BOLT[i])
            break
          }
        }
      });
      console.log(this.matchedInfo);
    this.fileClick(this.matchedInfo);

    },
    initData() {
      axios.get(baseUrl + '/api/prj/def?code=' + prjCode).then(res => {
        this.defs = res.data
        if ((this.defs)&&(this.defs.length>0)){
          console.log(this.defs)
        }
        });
    },

    initScene() {
      let options = {
        imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
          //调用影响中文服务
          url:
            "http://{s}.tianditu.gov.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" +
            "904d887e70ad2473628d011003ce14ca", //url地址
          layer: "tdtBasicLayer", //WMTS请求的层名称
          style: "default", //WMTS请求的样式名称
          format: "tiles", //MIME类型，用于从服务器检索图像
          tileMatrixSetID: "GoogleMapsCompatible", //	用于WMTS请求的TileMatrixSet的标识符
          subdomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"], //天地图8个服务器
          minimumLevel: 0, //最小层级
          maximumLevel: 18 //最大层级
        })
      };
      viewer = new Cesium.Viewer("cesiumContainer", options);
    },
    fileClick(def) {
      let path=[]
      let SECL_path=def.SECL.FILE_FSET
      let SHOC_path="关联文件\\面ID\\7-初喷混凝土SHOC\\SF5a.txt"
      // let path = "关联文件/线ID/5-建筑限界-BUIL/SF5b.txt";
      path=[SHOC_path,SECL_path]
      for(let i=0;i<path.length;i++){
        console.log(path[i])
        axios.get(`static/data/${prjCode}/${path[i]}`).then(res => {
        this.selectFile = res.data;
        // console.log(res.data);
        this.xml_show = vkbeautify.xml(this.selectFile);
        // console.log(this.xml_show);

        // console.log(x2jsObj.xml2js(this.xml_show));

        let obj = x2jsObj.xml2js(this.xml_show);

        this.detailShow = true;
        if (obj.LineString) {
          this.drawFile(obj.LineString.coordinates.__text);

        }
      });
      }
      
    },
    drawFile(data) {
      let result = [];
      data = data.replace(/\r\n/g, "@");
      data = data.replace(/\n/g, "@");
      let list = data.split("@");
      list.forEach(one => {
        if (one.length > 0) {
          let sp = one.trim().split(" ");
          if (sp.length == 2) {
            result.push([sp[0],sp[1]]);
          }
        }
      });
      console.log(result);
      let offset = {
        x: 11038980.4,
        y: 2918588,
        z: 1800
      };
      
      

      let path= [
        {
          'mileage': 'YK1+435',
          'x': '2172.972',
          'y': '-377.95',
          'z': '-7.45'
        },
        {
          'mileage': 'YK1+440',
          'x': '2168.4156',
          'y': '-375.8857',
          'z': '-7.38'
        },
        {
          'mileage': 'YK1+450',
          'x': '2159.2824',
          'y': '-371.8134',
          'z': '-7.32'
        },
      ]
      //建立模型

        path.forEach(one => {
        let lnglat = Util_Projection.webMercator2LngLat(
          offset.x + parseFloat(one.x),
          offset.y + parseFloat(one.y)
        );
        one.lng = lnglat[0];
        one.lat = lnglat[1];
        one.z = parseFloat(one.z) + offset.z;
        one.z = 0;
      });
      
      let h = parseInt(this.matchedInfo.SHOC.SHOC_THIC)/1000+0.02
      console.log(this.id,h)
      if(this.id==0){
        var shape = { name: JSON.stringify(this.matchedInfo.SHOC), outer: result };
        let model = new drawTunnel(this.id,viewer, [shape, [path,0,0,0]],"#4E4E4E");
        model.draw();
      }else if(this.id==1){
        var shape = { name: JSON.stringify(this.matchedInfo.SECL), outer: result };
        let model = new drawTunnel(this.id,viewer, [shape, [path,0,0,h]],"#A6A6A6");
        model.draw();
      }     
      
      // this.entity.push(viewer.entities.getById(this.id));
      viewer.flyTo(viewer.entities);
      this.id+=1;
      
    
    },

   
  }
};

</script>

<style>
#cesiumContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.el-table{
  background: #2b334f8f !important;
  color:white !important
}

/*.el-table{*/
/*color:white;*/
/*}*/
.el-table th, .el-table tr,.el-table td{
  border: 0 !important;
  background-color: transparent !important;
}
.el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color:#fff !important;
  background-color: rgba(148, 144, 144, 0.3) !important
}
.el-table th, .el-table tr {
  background-color: transparent !important;
}
.el-table::before {
  left: 0;
  bottom: 0;
  width: 100%;
  height: 0px;
}
.el-table thead {
  color: white ;
  font-weight: 500;
  background-color: rgba(148, 144, 144, 0.3) !important
}

.el-table__body tr:hover > td{
  background-color:#2b334fff !important;
}
.current-row > td {
  background: #fe81048f !important;
}

#map {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
#mapContainer {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

</style>
